<template>
        <div class="topTile">
          <!-- 天气 -->
          <div class="weather">
          
            <span v-if="infos.city">长武县</span>
            <span v-if="infos.city">{{ infos.info.type }}</span>
            <span v-if="infos.city">{{ infos.info.low }}~{{ infos.info.high }}</span>
            <span v-if="infos.city">{{ infos.info.fengxiang }}{{ infos.info.fengli }}</span>
          </div>
          <div class="center-title">
           
          </div>
          <!-- 时间 -->
          <div class="weather times">
            <span>{{ nowTime }}</span>
          </div>
        </div>
</template>
<script>
import { formatDate } from '../components/timeOut.js'
  export default{
    data(){
        return{
            infos:{},
            nowTime:""
        }
    },
    mounted(){
        this.getWeather()
        setInterval(() => {
         this.nowTime = formatDate(new Date())
       }, 1000)
    },
    methods:{
    async getWeather() {
      let { data: res } = await this.$https.get('https://api.vvhan.com/api/weather?city=咸阳市')
      if (!res.success) return
      this.infos = res
    },
    }

  }
</script>
<style lang="less" scoped>
    .topTile {
    width: 100%;
    height: 100px;
  
    background-size: 100% 100%;
    background-position: 0 -20px;
    background-repeat: no-repeat;
    z-index: 99;
    box-sizing: border-box;
    position: relative;
    .weather {
      position: absolute;
      left: 30px;
      top: 5px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        display: block;
        width: 25px;
        height: 25px;
      }

      span {
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
        color: #FFFFFF;
        margin: 0 20px;
      }
    }

    .times {
      right: 20px;
      top: 10px;
      display: inline;
      text-align: right;
    }

    .center-title {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;

      img {
        width: 35px;
      }

      .title-title {
        width: 400px;
      }
    }
  }
</style>